<template>
  <div class="listSearchWrap sysLogSearch">
    <a-row :gutter="[8, 16]">
       <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="4"
        :xxl="4">
        <a-input
          v-model="queryParams.name"
          @keyup.enter="handleSearch"
          :placeholder="$t('pleaseInput')+$t('name')"
          :allow-clear="true"
        />
      </a-col>
      <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="4"
        :xxl="4">
        <common-select
          :options="announceTypeEnumArr"
          :defaultValue="queryParams.type"
          @changeoption="changeOption('type', $event)"
          :allow-clear="true"
          :show-search="true"
          :placeholder="$t('pleaseSelect')+$t('announceType')"
          :replaceFields="typeReplaceFields"
          mode="multiple"
          :maxTagCount="1"
          style="width: 100%"
        ></common-select>
      </a-col>
      <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="4"
        :xxl="4">
        <common-select
          :options="pushChannelEnumArr"
          :defaultValue="queryParams.pushChannel"
          @changeoption="changeOption('pushChannel', $event)"
          :allow-clear="true"
          :show-search="true"
          :placeholder="$t('pleaseSelect')+$t('releaseChannel')"
          :replaceFields="typeReplaceFields"
          mode="multiple"
          :maxTagCount="1"
          style="width: 100%"
        ></common-select>
      </a-col>
      <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="4"
        :xxl="4">
        <a-input
          v-model="queryParams.userName"
          @keyup.enter="handleSearch"
          :placeholder="$t('pleaseInput')+$t('user')"
          :allow-clear="true"
        />
      </a-col>
      <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="4"
        :xxl="4">
        <a-input
          v-model="queryParams.roleName"
          @keyup.enter="handleSearch"
          :placeholder="$t('pleaseInput')+$t('role')"
          :allow-clear="true"
        />
      </a-col>
       <a-col
        :xs="12"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="4"
        :xxl="4">
        <common-select
          :options="listStatusEnumArr"
          :defaultValue="queryParams.listStatus"
          @changeoption="changeOption('listStatus', $event)"
          :allow-clear="true"
          :show-search="true"
          :placeholder="$t('pleaseSelect')+$t('status')"
          :replaceFields="typeReplaceFields"
          mode="multiple"
          :maxTagCount="1"
          style="width: 100%"
        ></common-select>
      </a-col>
    </a-row>
    <a-row>
      <a-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="16"
        :xl="10"
        :xxl="5">
        <div class="searchBtns">
            <auth-button type="primary" :auth="managePerms.announce.view" @click="handleSearch">
              <i class="iconfont icon-chazhao"></i>
              {{ $t('inquiry') }}
            </auth-button>
            <a-button @click="clearCondition">
              <i class="iconfont icon-qingkong"></i>
              {{ $t('clear') }}
            </a-button>
          <auth-button :auth="managePerms.announce.add" @click="handleAddEdit()" :loading="exporting">
           <i class="iconfont icon-xinjian"></i>
                {{ $t('new') }}
          </auth-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { 
  sysAnnounceTbColumns,
  pushChannelEnumArr,
  announceTypeEnumArr,
  listStatusEnumArr 
} from '../config/list'
import { mapState,mapMutations } from 'vuex'
import AuthButton from '@/components/AuthButton'
import { managePerms } from '@/config/permission/index'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import moment from 'moment'
export default {
  components: {
    AuthButton,
    CommonSelect,
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.sysAnnounce.queryParams,
      order: (state) => state.sysAnnounce.order,
    }),
    // 日期选择的默认值
    defaultDateRange () {
      if (this.queryParams.startTime && this.queryParams.endTime) {
        return [moment(this.queryParams.startTime), moment(this.queryParams.endTime)]
      }
      return []
    },
  },
  data () {
    return {
      managePerms,
      pushChannelEnumArr,
      announceTypeEnumArr,
      listStatusEnumArr,
      logTitles: [],
      typeReplaceFields: {
        key: 'value',
        value: 'value',
        title: 'name'
      },
      userData: [],
      exporting: false,
    }
  },
  watch: {},
  created () {
    // this.getUserData()
  },
  methods: {
    moment,
    handleAddEdit(recordData = {}) {
      this.$emit('handleAddEdit', {});
    },
    
    handleSearch () {
      this.$emit('clickbtn', { type: 'searchData', data: true })
    },
    clearCondition () {
      this.$store.commit('resetSysAnnounceQueryParams')
      this.handleSearch()
    },
    changeOption (key, val) {
      this.queryParams[key] = val
    }
  }
}
</script>
